<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取css文件所有类名</title>
    <style>
        #sdf{
            color: red;
        }
    </style>
    <!-- 
        link引入方式，如下代码无法获取
        var cssRules =document.styleSheets[0].cssRules || document.styleSheets[0].rules;
     -->
    <link href="./element-icon.css">
</head>
<body>
    <textarea id="txtArea" style="height: 400px;width: 100%;"></textarea>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        var iconNames = []

        // <style>标签样式解析
        // http://c.biancheng.net/view/6021.html
        var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        console.log(cssRules)

        /**
         * 正则测试平台
         * https://regexr.com/?2tvs3
         * 参考链接
         * https://www.javaroad.cn/questions/156502
        */
        $.ajax('./element-icon.css').then(res => {
            /**
             * 匹配更复杂类名
             * (\w+)?(\s*>\s*)?(#\w+)?\s*(\.\w+)?\s*{/gm
            */
            /**
             * 只匹配 .xxxx
             * \.-?[_a-zA-Z]+[_a-zA-Z0-9-]*
            */
            var match = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*):before\s*\{/gm.exec(res);
            
            res.replace(/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*):before\s*\{/g,(...arg) => {
                iconNames.push(arg[1])
            })
            document.querySelector('#txtArea').value = JSON.stringify(iconNames)
        })
    </script>
</body>
</html>